import {Form, Button, Dialog,} from '@antmjs/vantui'
import {View, ScrollView} from "@tarojs/components";
import {useMemo, useCallback, useEffect} from 'react';
import {DynamicFormData} from "@/common/types";
import DynamicFormV2, {FormConfig} from "@/components/DynamicFormV2";
import LocalData from "@/common/local_data";


// 创建一个单例 Dialog 实例
const Dialog_ = Dialog.createOnlyDialog()

export default function MoreOptionsTest() {
  // 3. 在父组件中创建和管理 form 实例
  const form = Form.useForm();

  // 4. 使用您提供的 accountSafeFormConfigs 作为表单配置
  const accountSafeFormConfigs: FormConfig[] = useMemo(() => [
    {
      type: 'input',
      inputType: LocalData.phoneInputType,
      maxlength: 11,
      name: 'ypNo',
      required: true,
      label: '样品编号',
      placeholder: '请填写样品编号',
      rules: [
        // {
        //   rule: /^[0-9]{6}$/,
        //   message: "用户名是必填项！"
        // },
      ]
    },
    {
      type: 'input',
      name: 'ypCf',
      label: '样品成分',
      required: true,
      placeholder: '请填写样品成分',
      rules: [
      ]
    },
    // {
    //   type: 'textarea', // Although it could be long, the UI looks like a standard input cell
    //   name: 'address', // Logical name for the company address
    //   label: '单位地址',
    //   placeholder: '请填写单位地址',
    //   required: false,
    //   layout: 'vertical',
    //   rules: []
    // },
    {
      type: 'checkbox',
      name: 'ypWdx',
      required: true,
      label: '样品稳定性',
      layout: 'vertical',
      options: LocalData.testOption1,
      rules: [
        {
          required: true,
          message: '样品稳定性为空哦~', // 自定义错误提示
        },
      ]
    },
    {
      type: 'radio',
      name: 'ypCx',
      label: '样品是否有磁性(即是否含有铁钴镍锰等磁性元素)',
      layout: 'vertical',
      required: true,
      options: LocalData.testOptionCX,
    },
    {
      type: 'input',
      name: 'hours',
      label: '预约时长',
      placeholder: '请填写预约时长',
      required: true,
      rules: []
    },
    {
      type: 'radio',
      name: 'isPJ',
      label: '是否需要喷金',
      layout: 'vertical',
      required: true,
      options: LocalData.testOptionYN,
    }, {
      type: 'radio',
      name: 'isDP',
      label: '是否需要打能谱',
      layout: 'vertical',
      required: true,
      options: LocalData.testOptionYN,
    },
    // {
    //   type: 'input',
    //   name: 'idNo',
    //   label: '身份证号',
    //   placeholder: '',
    //   rules: []
    // },
    // {
    //   type: 'rate',
    //   name: 'rate2',
    //   label: '评分',
    //   placeholder: '',
    //   layout: 'horizontal',
    //   rules: []
    // },
    // {
    //   type: 'slider',
    //   name: 'slider',
    //   label: 'slider',
    //   placeholder: '',
    //   layout: 'horizontal',
    //   rules: []
    // },
    // {
    //   type: 'switch',
    //   name: 'sex',
    //   label: '是否',
    //   layout: 'horizontal',
    //   disabled: true,
    //   rules: []
    // },
    // {
    //   type: 'input',
    //   name: 'username',
    //   label: '昵称',
    //   placeholder: '请输入昵称',
    //   layout: 'horizontal',
    //   required: true,
    // },
    // {
    //   type: 'textarea',
    //   name: 'company',
    //   label: '学校/组织',
    //   placeholder: '选择学校或输入组织',
    //   disabled: true,
    //   minHeight: '10px',
    //   required: true,
    //   layout: 'horizontal',
    //   rules: []
    // },

  ], []); // 依赖 avatar state, 确保 AvatarChooser 能正确重渲染

  // 6. 更新 initialValues 以匹配新的 formConfig
  const initialValues: DynamicFormData = useMemo(() => ({
    // fileType: "1",//正常
    // ypWdx: "1,2",//异常
    ypWdx: ["1","2"],//异常
    idNo: '440101********1234',
    mobile: '440101********1234',

  }), []);


  // 5. 定义提交逻辑
  const handleSubmit = useCallback(() => {
    form.validateFields((errors, values) => {
      if (!errors || errors.length === 0) {
        Dialog_.alert({
          title: '提交成功',
          message: JSON.stringify(values, null, 2),
        });
      } else {
        console.error('表单校验失败:', errors);
      }
    });
  }, [form]);

  const bottomBarHeight = 80;
  useEffect(() => {
    console.log('表单初始值2:', form.getFieldValue('fileType')); // 应输出 ["0", "1"]
    form.setFields(initialValues)
  }, [form]);
  return (
    // 6. 使用我们熟悉的“滚动区 + 固定底部”布局
    <View style={{height: '100vh', display: 'flex', flexDirection: 'column', backgroundColor: '#f7f8fa'}}>
      <Dialog_/>

      {/* 可滚动的表单区域 */}
      <ScrollView
        scrollY
        style={{
          flex: 1,
          height: '0',
          // 留出底部空间，防止内容被按钮遮挡
          paddingBottom: `${bottomBarHeight}px`,
          boxSizing: 'border-box'
        }}
      >
        {/* 7. 使用您强大的 DynamicFormV2 组件 */}
        <DynamicFormV2
          form={form}
          formConfigs={accountSafeFormConfigs}
          // initialValues={initialValues}
        />
      </ScrollView>

      {/* 固定在底部的按钮区域 */}
      <View
        style={{
          position: 'fixed',
          bottom: 0,
          left: 0,
          right: 0,
          height: `${bottomBarHeight}px`,
          padding: '15px 20px',
          boxSizing: 'border-box',
          backgroundColor: '#ffffff',
          borderTop: '1px solid #ebedf0',
          zIndex: 100,
          paddingBottom: `calc(15px + env(safe-area-inset-bottom))`
        }}
      >
        <Button
          block
          type="info"
          onClick={handleSubmit}
        >
          提交
        </Button>
      </View>
    </View>
  )
}
